import React, { useEffect, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { Form, Col, Row, Button, Divider, Table } from "antd";
import axios from "axios";
import head from "../common/head.js";
import "./index.css";

export default function PoiManageList() {
  let navigation = useNavigate();
  let location = useLocation();
  const { state } = location;
  const [form] = Form.useForm();
  const [data, setData] = useState({
    billing: { promotion: "", paid: "", paymentChannel: "" },
  });

  useEffect(() => {
    queryOrderById();
  }, [state.id]);
  /**
   * 根据订单id 查询详细
   * @returns
   */
  function queryOrderById() {
    axios({
      headers: {
        tenantId: 500,
        userId: 11111,
      },
      method: "get",
      url: `http://localhost:9103/order/catering/${state.id}`,
    }).then((data) => {
      setData(data.data);
    });
  }

  const onFinish = (values) => {};

  const columns = [
    {
      title: "序号",
      render: (item, re, index) => <div>{index + 1}</div>,
    },
    {
      title: "菜品名",
      dataIndex: ["productSnapshotOnPlace", "name"],
    },
    {
      title: "下单数量",
      dataIndex: ["quantity", "onPlace"],
    },
    {
      title: "结账数量",
      dataIndex: ["quantity", "onProduce"],
    },
    {
      title: "单价",
      dataIndex: ["productSnapshotOnPlace", "unitPrice"],
    },
    {
      title: "计量单位",
      dataIndex: ["productSnapshotOnPlace", "unitOfMeasure"],
    },
    {
      title: "总价",
      dataIndex: this,
      render: (text) =>
        text.productSnapshotOnPlace.unitPrice * text.quantity.onProduce,
    },
  ];

  return (
    <div>
      <Form
        form={form}
        name="advanced_search"
        className="ant-advanced-search-form"
        onFinish={onFinish}
        initialValues={{}}
      >
        <Row gutter={24}>
          {head(state)}
          {/** 菜品信息 */}
          <Col span={24}>
            <Row
              style={{
                background: "rgb(223, 220, 220)",
                marginLeft: 20,
                height: 40,
                paddingTop: 8,
              }}
            >
              <Col span={12}> 菜品信息</Col>
              <Col span={6}> 订单总价:{data.totalPrice}</Col>
              <Col span={2}> 优惠金额:{data.billing.promotion}</Col>
              <Col span={4}> </Col>
            </Row>
          </Col>
        </Row>
        <Row style={{ width: "100%" }}>
          <Col span={24}>
            <Table
              pagination={false}
              dataSource={data.items}
              columns={columns}
              rowKey="id"
            />
          </Col>
        </Row>
        <Row>
          已{data.billing.paymentChannel === "ALIPAY" ? "支付宝" : "微信"}支付：
          {data.billing.paid}元
        </Row>
        <Divider />

        <Row style={{ width: "100%" }}>
          <Col span={24} style={{ textAlign: "right" }}>
            <Button
              onClick={() => {
                navigation("/order/list");
              }}
              className="ant-btn-color"
              style={{
                paddingLeft: 50,
                paddingRight: 50,
                background: "rgb(247, 211, 9)",
                width: "20%",
              }}
            >
              返回
            </Button>
          </Col>
        </Row>
      </Form>
    </div>
  );
}
